<template>
  <div class="z-input" ref="zinput">
      <div class="zinput-head">
        <span>{{title}}</span>
      </div>
      <div class="input-cxt">
        <el-input
          ref="inputfocus"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea1"
          @focus='focus'
          @blur="blur"
          @input="changValue"
          >
          </el-input>
      </div>
      <!-- 先隐藏 -->
      <div class="focus-block" v-show="isShow"  ref="focusShow">
        <div class="focus-head">
          <div class="head-left">
            <!-- tabs 模块 -->
            <span class="entry entry-active" v-for="tab in tabs" :key="tab.title" @click="clickTab(tab.title)">{{tab.title}}</span>

          </div>
          <div class="head-close">
            <span @click="close"><el-icon><close /></el-icon></span>
          </div>
        </div>
        <div class="focus-content">
          <!-- <div class="entry-ctx" v-if="isClickTab === '词条'"> -->
            <!-- <div class="row" v-for="item in entryData" :key="item.title">
              <div class="row-title">{{item.title}}</div>
              <div class="row-ctx">
                <span v-for="i in item.children" :key="i.title" @click="clickItem(i.title)">{{i.title}}</span>
              </div>
            </div> -->
          <!-- </div> -->
          <template v-if="isClickTab === '模板'">
            <div class="template-ctx" >
              <div class="template">
                <div class="template-tree">
                  <el-tree
                      class="filter-tree"
                      :data="treeData"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      ref="tree">

                    <template #default="{ node, data }">
                      <span class="custom-tree-node">
                        <span v-if="data.children.length > 0 || data.isType" 
                          class="iconfont mianColor"
                          :class="node.expanded ? 'icon-jian': 'icon-jia'"
                          ></span>
                        <span v-if="!data.isType" class="iconfont icon-zhangdanchaxun mianColor"></span>
                        <span>{{ data.label }}</span>
                      </span>
                    </template>
                    </el-tree>
                </div>
                <div class="tree-content">
                  <div class="tree-title">{{SelectData.label}}</div>
                  <div class="tree-chilren-data" v-for="(item, index) in temContent" :key="item.ctx + index" @click="readCtx(item.ctx)">
                    <span class="one-data">{{item.ctx}}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>

        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Close } from '@element-plus/icons-vue'
import { defineComponent, ref, onMounted, watch, watchEffect, PropType } from '@vue/runtime-core';
import useRequet,{ RespData } from "../../../../hook/network"
import { TreeData } from "../../../../types/index"
import { ElMessage } from 'element-plus'


export default defineComponent({
  name: 'ZZInput',
  components: {Close},
  props: {
    textareaValue: {
      type: String,
    },
    title: {
      type: String,
      default: ''
    },
    treeData: {
      type: Array as PropType<TreeData[]>,
      default: []
    }
  },
  emits: ['changValue', 'focus'],
  setup(props, ctx) {
    let afferentTitle = props.title || ''
    const request = useRequet({ path: "" })
    const textarea1 = ref(props.textareaValue);
    const isShow = ref(false)
    const isClickTab = ref('模板')

    const inputfocus = ref(null)
    const focus = () => {
      isShow.value = true;
      // ctx.emit('focus')
      
      (inputfocus.value as any).focus()
    }

    const zinput = ref()

    onMounted(() => {
      document.addEventListener('click', (e) => {
        // console.log('执行了')
        if(zinput.value &&  !(zinput.value as any).contains(e.target)) {
          isShow.value = false
        }
      }, {passive:true})
    })

    watch(() => props.textareaValue, (textarea, prevTextarea) => {
      if(textarea) {
        textarea1.value = textarea
      }
      
      // ctx.emit('changValue',textarea)
    })

    const changValue = (val: any) => {
      ctx.emit('changValue', val)
    }


    const blur = () => {
      
      // console.log('blur')
    }

    const close = () => {
      isShow.value = false
    }

    const clickTab = (type:string) => {
      
      if(type.includes('词条')) {
        isClickTab.value = '词条'
      }

      if(type.includes('模板')) {
        isClickTab.value = '模板'
      }
    }

    const tabs = ref([
      // {
      //   title:'词条'
      // },
      {
        title:'模板'
      }
    ])
    // 词条数据
    // const entryData = [
      // {
      //   title: '常规检查',
      //   children: [
      //     {
      //       title:'哈哈哈'
      //     },
      //     {
      //       title:'嘻嘻嘻'
      //     }
      //   ]
      // }
    // ]
    const treeData = ref([] as TreeData[])

    watchEffect(() => {
      treeData.value = props.treeData
      afferentTitle = props.title
      tabs.value.forEach(i => {
        i.title = afferentTitle + i.title
      })
    })

    const SelectData = ref({} as any)
    const clickItem = (data: string) => {
      // textarea.value += data
      console.log(data)
    }

    const defaultProps =  {
      children: 'children',
      label: 'label'
    }
    const temContent = ref([] as any[])
    const handleNodeClick = (data: any) => {
      SelectData.value = data
      temContent.value = []
      if(!data.isType) {
        let content = JSON.stringify(SelectData.value)
        let cxt = JSON.parse(content)
        let other:any = JSON.parse(cxt.other)

        temContent.value.push({
          ctx: other[afferentTitle]
        })
      } else {
        // 有数据的
        let list = data.children
        list.forEach((i:any) => {
          if(!i.isType) {
            let content = JSON.stringify(i)
            let cxt = JSON.parse(content)
            let other = JSON.parse(cxt.other)

            temContent.value.push({
              ctx: other[afferentTitle]
            })
          }
          
        })
      }
      
    }

    const readCtx = (content: string) => {
      textarea1.value += content
      ctx.emit('changValue', textarea1.value)
    }

    
    return {
      textarea1,
      isShow,
      isClickTab,
      temContent,

      zinput,

      // entryData,
      tabs,
      clickItem,

      changValue,
      focus,
      blur,
      close,
      clickTab,

      treeData,
      defaultProps,
      handleNodeClick,

      SelectData,
      readCtx,
      inputfocus
    }
  }
})
</script>

<style lang="scss" scoped>
.z-input {
  width: 100%;
  margin-top: 10px;
  position: relative;
  .input-cxt {
    // position: absolute;
    width: 100%;
  }
  .focus-block {
    position: absolute;
    top: 80px;
    min-width: 600px;
    width: 80%;
    height: 280px;
    box-shadow: -1px 2px 10px #e9e9e9, 1px 0 3px #e9e9e9;
    z-index: 99;
    background: white;
    .focus-head {
      height: 35px;
      line-height: 35px;
      font-size: $fontSize;
      border-bottom: 1px solid #ccc;
      display: flex;
      background: white;

      .head-left {
        padding-left: 10px;
        position: relative;
        & > span {
          padding: 10px 20px;
          cursor: pointer;
          box-sizing: border-box;
        }

        .entry-active::after {
          content: '';
          width: 100%;
          height: 3px;
          background: $mainColor;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .entry:hover::before {
          color: $mainColor;
          width: 50px;
        }
        .entry::before {
          content: '';
          width: 0px;
          height: 3px;
          transform: scaleZ(0.5);
          background: $mainColor;
          position: absolute;
          bottom: 0;
          transition: all .5s;
          transform-origin: center;
        }
      }

      .head-close {
        flex: 1;
        text-align: right;
        padding-right: 10px;
        & > span {
          padding: 10px;
          box-sizing: border-box;
          cursor: pointer;
        }
      }
    }

    .focus-content {
      height: calc(100% - 35px);
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      .entry-ctx {
        width: 100%;
        height: 35px;
        line-height: 35px;
        .row {
          display: flex;
          .row-title {
            font-size: $fontSize-1;
            padding-left: 20px;
            padding-right: 30px;
            width: 60px;
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .row-ctx {
            font-size: $fontSize;
            & > span {
              background: #e9e9e9;
              padding: 2px 5px;
              margin-right: 5px;
              cursor: pointer;
            }
          }
        }
      }

      .template-ctx {
        height: 100%;
        .template {
          height: 100%;
          display: flex;
          .template-tree {
            // width: 180px;
            min-width: 240px;
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            overflow-y: auto;
          }
          .tree-content {
            padding-left: 20px;
            flex: 1;
            overflow-y: auto;
            .tree-title {
              font-size: $fontSize-1;
            }
            .tree-chilren-data {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: auto;
              height: 32px;
              line-height: 32px;
              background: #f8f8f8;
              border: 1px solid #e9e9e9;
              font-size: $fontSize;
              border-radius: $radius-1;
              margin-top: 10px;
              cursor: pointer;
            }

            .tree-chilren-data:hover {
              background: $mainColor;
              color: white;
              white-space: pre-wrap;
              overflow: auto;
              height: auto;
            }
          }
        }
      }
    }
  }
}

.mianColor {
  color: $mainColor;
}

</style>